<template>
  <div class="register-form">
    <el-card class="register-form">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/register' }">注册</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/login' }">登录</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="margin: 20px 0;"></div>
      <el-form :rules="rules" :model="form" label-width="100px">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" type="text">
            <app-svg-icon slot="suffix" icon-class="email"></app-svg-icon>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password">
            <app-svg-icon slot="suffix" icon-class="password"></app-svg-icon>
          </el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repeat">
          <el-input v-model="form.repeat" placeholder="请输入输入密码" type="password">
                        <app-svg-icon slot="suffix" icon-class="password"></app-svg-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button @click="onSubmit" type="primary">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  debounceTime,
  distinctUntilChanged,
  map,
  pluck,
  mapTo,
  tap
} from "rxjs/operators";
@Component({})
export default class Register extends Vue {
  form = {
    email: "",
    password: "",
    repeat: ""
  };
  rules = {
    email: [
      { required: true, message: "请输入邮箱", trigger: "blur" },
      { type: "email", message: "请输入正确的邮箱", trigger: "blur" }
    ],
    password: [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 8, max: 11, message: "长度在8到11个字符", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (/^(\d+)$/.test(value)) {
            callback(new Error("密码不能为纯数字"));
          } else {
            callback();
          }
        },
        trigger: "blur"
      }
    ],
    repeat: [
      { required: true, message: "请重复输入密码", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value !== this.form.password) {
            callback(new Error("两次输入密码不一致"));
          } else {
            callback();
          }
        },
        trigger: "blur"
      }
    ]
  };
  onSubmit() {}
}
</script>

<style lang="scss">
.register-form {
  width: 400px;
  align-self: center;
  margin: 0 auto;
}
</style>
